<!-- eslint-disable vue/no-dupe-keys -->
<!--
 * @fileoverview 通用高级表格组件
 * @description 基于ProComponents封装思想的高级表格组件，包含搜索表单、工具栏、表格和分页四大子组件
-->

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { GeneralSearchFormItem } from './index';
defineOptions({
  name: 'GeneralAdvancedTable'
});

// 表格组件引用
const tableListRef = ref();

const props = withDefaults(
  defineProps<{
    /** 表单项的配置 */
    searchItems?: GeneralSearchFormItem[];
    /** 一行展示多少个表单项 */
    formCols?: number;
    /** 表格的列 */
    columns?: any[];
    /** 表格数据 */
    data?: any[];
    /** 表格加载状态 */
    loading?: boolean;
    /** 分页配置 */
    pagination?: AntDesign.TablePaginationConfig;
    /** 行选择配置 */
    rowSelection?: any;
    /** 选中的行keys */
    selectedRowKeys?: (string | number)[];
    /** 是否启用行选择，默认为true */
    enableSelection?: boolean;
  }>(),
  {
    searchItems: () => [],
    formCols: 4,
    columns: () => [],
    data: () => [],
    loading: false,
    pagination: () => ({}),
    enableSelection: true,
    selectedRowKeys: () => []
  }
);

// 过滤后的列（用于实际显示）
const filteredColumns = ref(props.columns);

// 监听原始列变化
watch(
  () => props.columns,
  newColumns => {
    filteredColumns.value = newColumns;
  },
  { immediate: true }
);

const emits = defineEmits<{
  /** 搜索事件 */
  (e: 'search', params: any): void;
  /** 重置事件 */
  (e: 'reset', params: any): void;
  /** 表格change事件 */
  (e: 'tableChange', pagination: any, filters: any, sorter: any): void;
  /** 分页change事件 */
  (e: 'pageChange', page: number, pageSize: number): void;
  /** 行选择变化事件 */
  (e: 'selectionChange', selectedRowKeys: (string | number)[], selectedRows: any[]): void;
  /** 导出数据事件 */
  (e: 'exportData', selectedData: any[]): void;
}>();

// ----------------- Methods -----------------
/** 搜索 */
const handleSearch = (params: any) => {
  emits('search', params);
};

/** 重置 */
const handleReset = (params: any) => {
  emits('reset', params);
};

/** 列变化事件 */
const handleColumnsChange = (columns: any[]) => {
  filteredColumns.value = columns;
};

/** 表格change事件 */
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
  emits('tableChange', pagination, filters, sorter);
};

/** 分页change事件 */
const handlePageChange = (page: number, pageSize: number) => {
  emits('pageChange', page, pageSize);
};

/** 行选择变化事件 */
const handleSelectionChange = (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
  emits('selectionChange', selectedRowKeys, selectedRows);
};

/** 导出数据事件 */
const handleExportData = (selectedData: any[]) => {
  emits('exportData', selectedData);
};

// 计算属性：是否有选中数据
const hasSelectedData = computed(() => {
  return tableListRef.value?.hasSelectedData || false;
});

// 计算属性：选中的行keys
const selectedRowKeys = computed(() => {
  return tableListRef.value?.selectedRowKeys || [];
});

// 计算属性：选中的数据
const selectedData = computed(() => {
  return tableListRef.value?.selectedData || [];
});

// 导出选中数据的方法
const exportSelectedData = () => {
  if (tableListRef.value) {
    tableListRef.value.handleExportData();
  }
};

// 暴露方法和属性给父组件
defineExpose({
  hasSelectedData,
  selectedRowKeys,
  selectedData,
  exportSelectedData
});
</script>

<template>
  <div class="general-advanced-table w-100%">
    <!-- 搜索表单区域 -->
    <GeneralAdvancedSearchForm
      :search-items="props.searchItems"
      :form-cols="props.formCols"
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 工具栏区域 -->
    <GeneralAdvancedToolbar :columns="props.columns" @columns-change="handleColumnsChange">
      <template #customTooBtn>
        <slot name="customTooBtn"></slot>
      </template>
    </GeneralAdvancedToolbar>

    <!-- 表格区域 -->
    <GeneralAdvancedTableList
      ref="tableListRef"
      :columns="filteredColumns"
      :data="props.data"
      :loading="props.loading"
      :pagination="props.pagination"
      :row-selection="props.rowSelection"
      :selected-row-keys="props.selectedRowKeys"
      :enable-selection="props.enableSelection"
      @change="handleTableChange"
      @selection-change="handleSelectionChange"
      @export-data="handleExportData"
    >
      <template #bodyCell="{ column, record, index }">
        <slot name="bodyCell" :column="column" :record="record" :index="index"></slot>
      </template>
    </GeneralAdvancedTableList>

    <!-- 分页区域 -->
    <GeneralAdvancedPagination :pagination="props.pagination" @change="handlePageChange" />
  </div>
</template>

<style lang="scss" scoped></style>
